<!--
 * @Author: wangming
 * @Date: 2020-09-07 11:52:21
 * @LastEditors: wangming
 * @LastEditTime: 2021-12-28 14:43:04
 * @Description: 左侧菜单栏
-->
<template>
  <div class="mb24">
    <el-collapse :value="0">
      <el-collapse-item
        :title="item.label"
        :name="index"
        v-for="(item, index) in taglist"
        :key="index"
      >
        <draggable
          :move="onMove"
          drag-class="drag"
          :forceFallback="true"
          :clone="handleAddFormItem"
          :sort="false"
          :list="item.list"
          :group="{ name: 'form', pull: 'clone', put: false }"
        >
          <tags
            class="component-tag"
            v-for="(tag, tindex) in item.list"
            :key="tindex"
            :value="desigconfig[tag.value]"
          ></tags>
        </draggable>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import tags from "./tags";
import draggable from "vuedraggable";
import { cloneDeep } from "lodash";
import { uuid } from "@/utils/common.js";
import { desigconfig } from "@/pageConfig/index.js";
export default {
  data() {
    return {
      desigconfig,
    };
  },
  props: {
    text: {
      type: String,
      default: "",
    },
    taglist: {
      type: Array,
      default: () => [],
    },
  },
  components: { tags, draggable },
  methods: {
    onMove(e) {
      let value = this.desigconfig[e.draggedContext.element.value] || {};
      // //表单内部不能该拖拽表单
      if (
        value.tagName == "hlLayoutForm" &&
        e.to?.dataset?.key === "formlayout"
      ) {
        return false;
      } else {
        return true;
      }
    },
    handleAddFormItem(tag) {
      const newFormItem = this.desigconfig[tag.value];
      let alias =
        newFormItem.alias ||
        newFormItem.tagName.replace(/^(hl|hm)/, "").toLowerCase();
      newFormItem.key = alias + "_" + uuid(5);
      newFormItem.__config.label = newFormItem.name;
      let _newFormItem = cloneDeep(newFormItem)
      if(tag.beforeCreate){
       tag.beforeCreate(_newFormItem)
      }
      return _newFormItem;
    },
  },
};
</script>

<style lang="scss" scoped>
.drag {
  border: 1px solid #1890ff;
  color: #1890ff;
  opacity: 1 !important;
}
</style>
